<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Virtual Drum Kit</title>
		<link rel="stylesheet" href="drumkit.css">
	</head>
	<body>
		<h1 class="title">Virtual Drum Kit</h1>
		<small>Play the virtual drum kit</small>
		<div class="music_box">
		
		  <div class="box_bumps">
		    <button data-key="65" id="65" class="key">
		      <strong>A</strong>
		      <span>clap</span>
		    </button>
		    <button data-key="83" id="83" class="key">
		      <strong>S</strong>
		      <span>snare</span>
		    </button>
		    <button data-key="68" id="68" class="key">
		      <strong>D</strong>
		      <span>kick</span>
		    </button>
		    <button data-key="70" id="70" class="key">
		      <strong>F<span>_</span></strong>
		      <span>hi hat</span>
		    </button>
		
		    <audio data-key="65" src="https://arsen-nazaryan.github.io/drum_kit/media/sounds/clap.wav"></audio>
		    <audio data-key="83" src="https://arsen-nazaryan.github.io/drum_kit/media/sounds/snare.wav"></audio>
		    <audio data-key="68" src="https://arsen-nazaryan.github.io/drum_kit/media/sounds/kick.wav"></audio>
		    <audio data-key="70" src="https://arsen-nazaryan.github.io/drum_kit/media/sounds/hihat.wav"></audio>
		  </div>
		
		  <div class="box_bumps">
		    <button data-key="74" id="74" class="key">
		      <strong>_J</strong>
		      <span>boom</span>
		    </button>
		    <button data-key="75" id="75" class="key">
		      <strong>K</strong>
		      <span>tom</span>
		    </button>
		    <button data-key="76" id="76" class="key">
		      <strong>L</strong>
		      <span>tink</span>
		    </button>
		    <button data-key="186" id="186" class="key">
		      <strong>;</strong>
		      <span>openhat</span>
		    </button>
		
		    <audio data-key="74" src="https://arsen-nazaryan.github.io/drum_kit/media/sounds/boom.wav"></audio>
		    <audio data-key="75" src="https://arsen-nazaryan.github.io/drum_kit/media/sounds/tom.wav"></audio>
		    <audio data-key="76" src="https://arsen-nazaryan.github.io/drum_kit/media/sounds/tink.wav"></audio>
		    <audio data-key="186" src="https://arsen-nazaryan.github.io/drum_kit/media/sounds/openhat.wav"></audio>
		  </div>
		
		</div>
		<p class="footer_info">Created with <a class="heart" target="blank" href="https://arsen-nazaryan.github.io/" title="Arsen Nazaryan"> ♥ </a></p>
		
		<script src="drumkit.js"></script>
	</body>
</html>